import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { FlatList, TouchableOpacity, View, Text } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import styles from './Styles/ShortcutListStyle'

export default class ShortcutList extends Component {
  // Prop type warnings
  static propTypes = {
    data: PropTypes.array,
  }
  
  // Defaults for props
  static defaultProps = {
    data: null
  }

  render () {
    return (
      <FlatList
        data={this.props.data}
        keyExtractor={(item,index)=>index}
        renderItem={({item, index})=> (
          <TouchableOpacity
            style={styles.item}
            onPress={item.event}>
            <View style={styles.left}>
              <Icon style={[styles.icon, {color:item.color}]} name={item.icon} size={22} />
              <Text style={styles.title}>{item.title}</Text>
            </View>
            <Icon name='angle-right' size={16} />
          </TouchableOpacity>
        )}/>
    )
  }
}
